﻿<template>
    <div>
        <component is="style" />
        <div v-if="error" class="color-999">{{error}}</div>
        <div v-on:click="openData" class="color-black-1" v-else>
            <span v-if="!currentDate" class="color-999">{{placeholder}}</span>
            <div v-else class="flex-row">
                <template v-if="type=='range'||type=='multiple'">
                    <div style="overflow:hidden;text-overflow:ellipsis;" v-if="!connector">
                        <div v-for="item in currentDate">{{item}}</div>
                    </div>
                    <div v-else-if="!!connector" class="flex-row">
                        <div v-for="(item,index) in currentDate"><span class="margin-lr-4">{{index==0?'':connector}}</span>{{item}}</div>
                    </div>
                </template>
                <template v-else>
                    {{currentDate}}
                </template>
                <van-icon v-on:click.stop="currentDate=null" class="van-field__clear" v-if="clearable" size="14" name="close"></van-icon>
            </div>
        </div>
        <van-calendar v-model="show" :default-date="timestamp" :type="type" :title="title" :show-title="showTitle" :show-subtitle="showSubtitle" :min-date="minDate" :max-date="maxDate" :show-confirm="showConfirm" :formatter="formatter" :readonly="readonly" :confirm-text="confirmText" :confirm-disabled-text="confirmDisabledText" :round="round" :close-on-click-overlay="closeOnClickOverlay" :first-day-of-week="firstDayOfWeek" color="#1989fa" :safe-area-inset-bottom="false" get-container="body" v-on:confirm="confirm"></van-calendar>
    </div>
</template>

<script>
    module = (function (hxt) {
        return {
            props: {
                value: {
                    type: Object,
                    'default': function () {
                        return null;
                    }
                },
                title: {//标题
                    type: String,
                    'default': function () {
                        return '日期选择';
                    }
                },
                connector: {//连接符 ~ 至, 横向展示
                    type: String,
                    'default': function () {
                        return '';
                    }
                },
                //是否禁用组件
                disabled: {
                    type: Boolean,
                    'default': function () {
                        return false
                    }
                },
                type: {//选择类型:single表示选择单个日期，multiple表示选择多个日期，range表示选择日期区间
                    type: String,
                    'default': function () {
                        return 'single';
                    }
                },
                maxDate: {//最大时间
                    type: Object,
                    'default': function () {
                        return hxt.dateAdd('M', +6, hxt.dateFormat('yyyy-MM-dd'));
                    }
                },
                minDate: {//最小时间
                    type: Object,
                    'default': function () {
                        return hxt.dateAdd('M', -6, hxt.dateFormat('yyyy-MM-dd'));
                    }
                },
                showTitle: {//是否展示日历标题
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                showSubtitle: {//是否展示日历副标题（年月）
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                showConfirm: {//是否展示确认按钮
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                confirmText: {//确认按钮文字
                    type: String,
                    'default': function () {
                        return '确定';
                    }
                },
                confirmDisabledText: {//确认按钮处于禁用状态时的文字
                    type: String,
                    'default': function () {
                        return '确定';
                    }
                },
                firstDayOfWeek: {//设置周起始日 0-6
                    type: Number,
                    'default': function () {
                        return 0;
                    }
                },
                readonly: {
                    type: Boolean,
                    'default': function () {
                        return false;
                    }
                },
                formatter: {//日期格式化函数
                    type: Function,
                    'default': function (day) {
                        return day;
                    }
                },
             
                placeholder: {
                    type: String,
                    'default': function () {
                        return '请选择';
                    }
                },
                closeOnClickOverlay: {//是否在点击遮罩层后关闭
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                round: {// 	是否显示圆角
                    type: Boolean,
                    'default': function () {
                        return true;
                    }
                },
                clearable: {//是否可清空
                    type: Boolean,
                    'default': function () {
                        return false;
                    }
                },
                href: {
                    type: String,
                    default: function () {
                        return null
                    }
                }
            },
            data: function () {
                return {
                    key: 'hxt.calendar.show.' + hxt.guid(),
                    show: false,
                    timestamp: null,
                    error: ''
                };
            },
            watch: {
                value: {
                    handler: function (newValue, oldValue) {
                        var _this = this;
                        if (!newValue) {
                            if (_this.type == 'range' || _this.type == 'multiple') _this.timestamp = [hxt.dateAdd('d', 0)];
                            else _this.timestamp = hxt.dateAdd('d', 0);
                            return;
                        };
                        if (hxt.isArray(newValue) && _this.type != 'range' && _this.type != 'multiple') return _this.error = "单选，v-model不能是数组";
                        if (!hxt.isArray(newValue) && (_this.type == 'range' || _this.type == 'multiple')) return _this.error = "多选，v-model必须是一个数组";
                        if (hxt.isArray(newValue)) {
                            _this.timestamp = [];
                            $.each(newValue, function (idx, item) {
                                _this.timestamp.push(hxt.dateAdd('M', -0, hxt.dateFormat('yyyy-MM-dd', item)));
                            });
                        } else {
                            _this.timestamp = hxt.dateAdd('M', -0, hxt.dateFormat('yyyy-MM-dd', newValue));
                        };
                    },
                    immediate: true
                },
                show: function (val) {
                    var _this = this;
                    hxt.popupAdapter.appWatch(_this.key, !!val, function () { _this.show = false; }, _this.href);
                },
            },
            computed: {
                currentDate: {
                    get: function () {
                        return this.value;
                    },
                    set: function (val) {
                        this.$emit('input', val);
                    }
                }
            },
            activated: function () {

            },
            mounted: function () {
                var _this = this;

            },
            methods: {
                openData: function () {
                    var _this = this;
                    if (!!_this.disabled) return;
                    _this.show = true;
                },
                confirm: function (e) {
                    var _this = this;
                    if (hxt.isArray(e)) {
                        var currentDate = [];
                        $.each(e, function (idx, item) {
                            currentDate.push(hxt.dateFormat('yyyy-MM-dd', item));
                        });
                        _this.currentDate = currentDate;
                    } else {
                        _this.currentDate = hxt.dateFormat('yyyy-MM-dd', e);
                    };
                    console.log(_this.currentDate)
                    _this.timestamp = e;
                    _this.show = false;
                }
            },
            components: {
            }
        };
    })(window.$jscript.fn);
</script>
<style>
</style>